import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
import React, { useState, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Picker } from 'react-native-wheel-pick';
import Icon from 'react-native-vector-icons/Ionicons';
import { useRoute } from '@react-navigation/native';
import { deviceStore, observer, webSocketStore } from '~/store';
import { NavBarHeader, TransitionModal, ImageViewModal } from '~/components';
import { onePx, px2dp, scale, width } from '~/utils/px2dp';
import { getBleBloodSleepParams, setBleBloodSleepParams } from '~/utils/ble/application';

const interval = [15, 30, 60];
const start1 = [21, 22, 23];
const endHour = [0, 1, 3, 4, 5, 6, 7, 8, 9];
const minArr = Array.from({ length: 60 }, (_, i) => i);
const WatchMonitor = observer(() => {
    const { t } = useTranslation();
    const router: any = useRoute();
    const { linkSubDeviceStatus } = webSocketStore;
    const { bloodSleepData } = deviceStore;
    const [timeData, setTimeData] = useState<any>(bloodSleepData); // 默认参数设置
    const [visible, setVisible] = useState(false);
    const [visible1, setVisible1] = useState(false);
    const [selectValue, setSelectValue] = useState(bloodSleepData[5]);

    // 查询
    const getData = () => {
        getBleBloodSleepParams(router.params);
    };
    // 更改间隔
    const changeInterval = (item) => {
        if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
            Toast.show({ content: t('WatchMonitor.t11') });
            return;
        }
        timeData[5] = item;
        setTimeData(timeData);
        setSelectValue(item);
        setBleBloodSleepParams(timeData, router.params);
        setTimeout(() => {
            getData();
        }, 300);
    };

    // 开关设置
    const switchBloodParams = () => {
        if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
            Toast.show({ content: t('WatchMonitor.t12') });
            return;
        }
        timeData[0] = timeData[0] === 1 ? 0 : 1;
        setTimeData(timeData);
        setBleBloodSleepParams(timeData, router.params);
        setTimeout(() => {
            getData();
        }, 300);
    };

    useEffect(() => {
        getData();
    }, []);

    const timeText = useMemo(() => {
        const hours1 = bloodSleepData[1].toString().padStart(2, '0');
        const min1 = bloodSleepData[2].toString().padStart(2, '0');
        const hours2 = bloodSleepData[3].toString().padStart(2, '0');
        const min2 = bloodSleepData[4].toString().padStart(2, '0');
        return <Text style={styles.title}>{`${hours1}:${min1} ~ ${hours2}:${min2}`}</Text>;
    }, [bloodSleepData]);

    const [hour1, setHour1] = useState(0);
    const [mine1, setMine1] = useState(0);
    const [hour, setHour] = useState(0);
    const [mine, setMine] = useState(0);

    const onPress = () => {
        if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
            Toast.show({ content: t('WatchMonitor.t12') });
            return;
        }
        timeData[1] = hour1 || start1[0];
        timeData[2] = mine1 || minArr[0];
        timeData[3] = hour || endHour[0];
        timeData[4] = mine || minArr[0];
        setTimeData(timeData);
        setBleBloodSleepParams(timeData, router.params);
        setTimeout(() => {
            getData();
        }, 300);
    };
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('WatchMonitor.title')} />
            <View style={styles.content}>
                <View style={[styles.list]}>
                    <Text style={[styles.t1]}>{t('WatchMonitor.t1')}</Text>
                    <View>
                        <View
                            style={[
                                styles.row,
                                styles.commenTop,
                                {
                                    justifyContent: 'space-between',
                                },
                            ]}>
                            {timeText}
                            <Pressable style={styles.row} onPress={() => setVisible1(true)}>
                                <Text style={styles.edit}>{t('WatchMonitor.t2')}</Text>
                                <Icon name="chevron-forward-outline" size={18} color={'#a4a4a4'}></Icon>
                            </Pressable>
                        </View>
                        <Pressable style={styles.commenTop} onPress={switchBloodParams}>
                            <Image
                                source={{
                                    uri: `https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/alarm_clock/${
                                        bloodSleepData[0] === 1 ? 'open.png' : 'shut.png'
                                    }`,
                                }}
                                resizeMode="contain"
                                style={styles.switchIcon}
                            />
                        </Pressable>
                    </View>
                </View>
                <Pressable style={[styles.row, styles.commenTop]} onPress={() => setVisible(true)}>
                    <Text style={styles.tips}>{t('WatchMonitor.t3')}</Text>
                    <Image
                        style={[styles.issue, { tintColor: '#1877FF' }]}
                        source={require('~/assets/user/issue.png')}
                    />
                </Pressable>
                <View style={[styles.row, styles.between, styles.commenTop]}>
                    {interval.map((item, index) => {
                        return (
                            <Pressable
                                key={index}
                                style={[styles.list_border, selectValue == item && { backgroundColor: '#1877FF' }]}
                                onPress={() => changeInterval(item)}>
                                {item == 60 ? (
                                    <Text style={[styles.border_text, selectValue == item && { color: '#fff' }]}>
                                        {t('WatchMonitor.t4')}
                                    </Text>
                                ) : (
                                    <Text style={[styles.border_text, selectValue == item && { color: '#fff' }]}>
                                        {item}
                                        {t('WatchMonitor.t5')}
                                    </Text>
                                )}
                            </Pressable>
                        );
                    })}
                </View>
            </View>
            <ImageViewModal
                visible={visible}
                toggleVisible={() => setVisible(false)}
                url="https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/blood/xycjpl.png"
            />
            <TransitionModal visible={visible1} toggleVisible={() => setVisible1(false)} title={t('WatchMonitor.t6')}>
                <View>
                    <Text style={styles.tips1}>{t('WatchMonitor.t7')}</Text>
                    <View style={[styles.row, styles.between]}>
                        <View style={[styles.listPicker]}>
                            <Text style={styles.time}>{t('WatchMonitor.t8')}</Text>
                            <View style={styles.row}>
                                <Picker
                                    style={styles.pciker}
                                    itemStyle={styles.itemStyle}
                                    textSize={12}
                                    pickerData={start1}
                                    onValueChange={(index) => {
                                        const time = index > 10 ? index : index.toString().padStart(2, '0');
                                        setHour1(time);
                                    }}
                                />
                                <Picker
                                    style={styles.pciker}
                                    itemStyle={styles.itemStyle}
                                    textSize={12}
                                    pickerData={minArr}
                                    onValueChange={(index) => {
                                        const time = index > 10 ? index : index.toString().padStart(2, '0');
                                        setMine1(time);
                                    }}
                                />
                            </View>
                        </View>
                        <View style={[styles.listPicker]}>
                            <Text style={styles.time}>{t('WatchMonitor.t9')}</Text>
                            <View style={[styles.row]}>
                                <Picker
                                    style={styles.pciker}
                                    itemStyle={styles.itemStyle}
                                    textSize={12}
                                    pickerData={endHour}
                                    onValueChange={(index) => {
                                        const time = index > 10 ? index : index.toString().padStart(2, '0');
                                        setHour(time);
                                    }}
                                />
                                <Picker
                                    style={styles.pciker}
                                    itemStyle={styles.itemStyle}
                                    textSize={12}
                                    pickerData={minArr}
                                    onValueChange={(index) => {
                                        const time = index > 10 ? index : index.toString().padStart(2, '0');
                                        setMine(time);
                                    }}
                                />
                            </View>
                        </View>
                    </View>
                    <Pressable style={styles.bootom_button} onPress={onPress}>
                        <Text style={styles.bootom_buttonText}>{t('WatchMonitor.t10')}</Text>
                    </Pressable>
                </View>
            </TransitionModal>
        </View>
    );
});
export default WatchMonitor;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    list: {
        backgroundColor: '#fff',
        marginTop: px2dp(32),
        padding: px2dp(24),
        borderRadius: px2dp(20),
        justifyContent: 'space-between',
    },
    content: {
        marginHorizontal: px2dp(32),
    },
    title: {
        fontSize: scale(56),
        fontWeight: 'bold',
        color: '#000',
    },
    t1: {
        color: '#a4a4a4',
        fontSize: scale(24),
    },
    switchIcon: {
        width: px2dp(100),
        height: px2dp(50),
    },
    edit: {
        color: '#a4a4a4',
        fontSize: scale(24),
        marginRight: px2dp(6),
    },
    commenTop: {
        marginTop: px2dp(32),
    },
    issue: {
        width: px2dp(30),
        height: px2dp(30),
    },
    tips: {
        color: '#1877FF',
        fontSize: scale(28),
    },
    list_border: {
        borderWidth: onePx,
        borderColor: '#E8E8E8',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        padding: px2dp(24),
        borderRadius: px2dp(12),
    },
    border_text: {
        fontSize: scale(28),
        color: '#666666',
        fontWeight: 'bold',
    },
    listPicker: {
        borderWidth: onePx,
        borderColor: '#a4a4a4',
        marginTop: px2dp(24),
        borderRadius: px2dp(24),
    },
    time: {
        textAlign: 'center',
        marginTop: px2dp(64),
        fontWeight: 'bold',
    },
    pciker: {
        width: (width - px2dp(32)) / 4,
        backgroundColor: '#fff',
    },
    itemStyle: {
        color: '#191919',
        fontSize: px2dp(28),
        fontWeight: 'bold',
    },
    bootom_button: {
        backgroundColor: '#1877FF',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(16),
        height: px2dp(100),
        marginTop: '30%',
        width: '100%',
    },
    bootom_buttonText: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
    tips1: {
        marginTop: px2dp(32),
        fontSize: scale(28),
        color: '#a4a4a4',
    },
});
